<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
    .states :hover {
        fill: red;
        stroke-width: 2px;
    }
 
    .state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: 0.5px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }
</style>
<svg id="cy" width="900" height="600" style="border:1px gainsboro solid"></svg>
<script src="d3.v4.min.js"></script>
<script type="text/javascript" src="leaflet.js"></script>

<script src="topojson.v2.min.js"></script>

<script>
	var colorArr = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
	
    var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height");
 
    var projection = d3.geoMercator()
            .center([110, 31])
            .scale(750)
            .translate([width/2, height/2+height/6])
    var path = d3.geoPath()
            .projection(projection);
 
    d3.json("china.json", function(error, cn) {
        if (error) throw error;
		
        svg.append("g")
                .attr("class", "province")
                .selectAll("path")
                .data(cn.features)
                .enter()
				.append("path")
                .attr('stroke','white')
                .attr('fill','lightgray')
                .attr("d", path)
                .append('title')
                .text(function(d){
                    a=d
                    return d.properties.name
                });
 
        svg.append("path")
                .attr("class", "state-borders")
                .attr("d", path(topojson.mesh(cn, cn, function(a, b) { return a !== b; })));
		
		
		var lineFunction = d3.line()
			.x( function(d) {
					return d[0];
		    })
			.y( function(d) {
					return d[1]; 
			})
			.curve(d3.curveBasis);
			
		var points = [];
		var lineFunction2 = function(cityList){
			var dataList = [];
			var datas = [];
			var previousLineName;
			for(var i = 0; i < cityList.length; i++){
				cities = cityList[i];
				for(var j = 0; j < cities.length; j++){
					city = cities[j];
					datas.push(
						projection([city.position.x/100, city.position.y/100])
					);
					points.push(
						projection([city.position.x/100, city.position.y/100])
					);
					
				}
				dataList.push(datas);
				datas = [];
			}
			return dataList;
		}
		
		d3.json("tokyo-railways2.json", function(err, cities){
			if (err) throw err;
			var cityList = cities.elements.nodes;
			var datas = lineFunction2(cityList);
			//从此处得到了所有城市点坐标，用points进行描点，用data集合进行描线
			for(var i=0;i<datas.length;i++){
				var data = datas[i];
				svg.append("g")
				.attr("class", "citylines"+i)
				.append("path")
				.attr("d", lineFunction(data))
				.attr("stroke", colorArr[i]) //颜色
				.attr("fill", "none")
				.attr("stroke-width", "2");
			}
			
			for(var i=0;i<cityList.length;i++){
				var cities = cityList[i];
				svg.append("g")
				.attr("class", "city")
				.selectAll("circle")
				.data(cities)
				.enter()
				.append("circle")
				.attr('stroke','grey')
				.attr('fill', colorArr[i])
				.attr("r", 2)
				.attr("transform", function(d) {
					return "translate(" + projection([
								d.position.x/100,
								d.position.y/100
							]) + ")";
				})
				.append('title')
				.text(function(d){
					a=d
					return d.data.station_name;
				});
			}
			
			for(var i=0;i<datas.length;i++){
				var data = datas[i];
				svg.append("circle")
						.attr("r", 3)
						.attr("fill", colorArr[colorArr.length - i])
						.append('animateMotion')
						.attr('path', lineFunction(data))
						.attr('rotate', "auto")
						.attr('dur', "10s")
						.attr('repeatCount', "indefinite"); 
			}
			/*
			let zoom = d3.zoom()
			  .scaleExtent([1, 10])
			  //.translateExtent([[0,0], [areaWidth, areaHeight]])
			  .on("zoom", zoomed);


		    let zoomRect = svg.append("rect")
			  .attr("width", width)
			  .attr("height", height)
			  .attr("fill","none")
			  .attr("pointer-events","all")
			  .call(zoom);
			
			svg.call(zoom);
			
			*/
		});
		
    });
 
</script>